/* eslint-disable */
//不使用JQuery版的
import html2canvas from "html2canvas";
import JsPDF from "jspdf";

/**
 * @param  ele          要生成 pdf 的DOM元素（容器）
 * @param  padfName     PDF文件生成后的文件名字
 * */

function downloadPDF(ele, pdfName) {
	let eleW = ele.offsetWidth; // 获得该容器的宽
	let eleH = ele.offsetHeight; // 获得该容器的高
	let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
	let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离

	var canvas = document.createElement("canvas");
	var abs = 0;

	let win_in =
		document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
	let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）

	if (win_out > win_in) {
		// abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
		abs = (win_out - win_in) / 2; // 获得滚动条宽度的一半
		//
	}
	canvas.width = eleW * 2; // 将画布宽&&高放大两倍
	canvas.height = eleH * 2;

	var context = canvas.getContext("2d");
	context.scale(2, 2);
	context.translate(-eleOffsetLeft - abs, -eleOffsetTop);
	// 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
	// translate的时候，要把这个差值去掉

	// html2canvas(element).then( (canvas)=>{ //报错
	// html2canvas(element[0]).then( (canvas)=>{
	html2canvas(ele, {
		dpi: 300,
		// allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
		useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
	}).then((canvas) => {
		var contentWidth = canvas.width;
		var contentHeight = canvas.height;
		//一页pdf显示html页面生成的canvas高度;
		var pageHeight = (contentWidth / 592.28) * 841.89;
		//未生成pdf的html页面高度
		var leftHeight = contentHeight;
		//页面偏移
		var position = 0;
		//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
		var imgWidth = 595.28;
		var imgHeight = (595.28 / contentWidth) * contentHeight;
		var pageData = canvas.toDataURL("image/jpeg", 1.0);
		var pdf = new JsPDF("", "pt", "a4");
		//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
		//当内容未超过pdf一页显示的范围，无需分页
		if (leftHeight < pageHeight) {
			//在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
			pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
			// pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
		} else {
			// 分页
			while (leftHeight > 0) {
				pdf.addImage(
					pageData,
					"JPEG",
					0,
					position,
					imgWidth,
					imgHeight
				);
				leftHeight -= pageHeight;
				position -= 841.89;
				//避免添加空白页
				if (leftHeight > 0) {
					pdf.addPage();
				}
			}
		}
		//可动态生成
		pdf.save(pdfName);
	});
}

function exportPDF() {
	const pdf = new jsPDF("p", "mm", "a4"); // 创建一个A4大小的PDF
	const blockElements = document.querySelectorAll(".block"); // 使用合适的选择器选择小块的DOM元素
	const pageHeight = 297; // 页面高度，假设PDF纸张大小为A4
	let position = 0;

	blockElements.forEach((blockElement) => {
		const blockHeight = blockElement.clientHeight; // 获取小块的高度
		const canvas = document.createElement("canvas"); // 创建一个canvas元素
		const context = canvas.getContext("2d");

		// 设置canvas的宽高和样式与小块相同
		canvas.width = blockElement.clientWidth;
		canvas.height = blockHeight;
		context.fillStyle = "white";
		context.fillRect(0, 0, canvas.width, canvas.height);

		// 将小块内容绘制到canvas上
		html2canvas(blockElement).then((blockCanvas) => {
			context.drawImage(blockCanvas, 0, 0);

			// 根据小块的高度和位置，判断是否需要新建页面
			if (position + blockHeight > pageHeight) {
				pdf.addPage(); // 添加新的页面
				position = 0; // 重置位置
			}

			// 将canvas转换为图片，并添加到PDF中
			const imgData = canvas.toDataURL("image/png");
			pdf.addImage(imgData, "PNG", 0, position);
			position += blockHeight;
		});
	});

	pdf.save("example.pdf"); // 保存PDF文件
}

export default {
	downloadPDF,
	exportPDF,
};
// 八灵人满怀豪情与信心，为现代化新广东增辉添色
